<template>
    <div class="order">
        <TopDesc desc="আমার ধার"></TopDesc>
        <!-- 状态 -->
        <ul class="order-top">
            <router-link to="/order" v-for="item in listTitle" :key="item.id"
                :class="{ active: item.id === $store.state.count }" @click.native="doClick(item)">
                <li :class="{ isActive: item.id === $store.state.count }">{{ item.msg }}</li>
            </router-link>
        </ul>
        <template>
            <div class="order-list" v-for="(item, index) in orderList" :key="item.id">
                <!-- 商品top -->
                <div class="ol-top">
                    <div class="ol-img">
                        <img :src="toICon(item.product.icon)" alt="">
                    </div>
                    <div class="ol-name">{{ item.product.name }}</div>
                </div>
                <!-- 商品信息 -->
                <div class="ol-info">
                    <ul class="ol-info-left">
                        <li>ঋণের পরিমাণ</li>
                        <li>ঋণের মেয়াদ (দিন)</li>
                        <li>ঋণ তারিখ</li>
                        <li>লোন নম্বর</li>
                        <li v-if="item.status === 'PASS' || item.status === 'LOAN_SUCCESS'">প্রশ্ন করুন</li>
                    </ul>
                    <ul class="ol-info-right">
                        <li>{{ item.amount }}</li>
                        <li>{{ item.term }}{{ item.termUnit }}</li>
                        <li>{{ new Date(item.created).toLocaleString() }}</li>
                        <li>{{ item.id }}</li>
                        <li class="kefu" @click="tokefuList(item.id)"
                            v-if="item.status === 'PASS' || item.status === 'LOAN_SUCCESS'">
                            <img src="../../assets/images/kefu.png" alt="">
                        </li>
                    </ul>
                </div>
                <!-- 状态按钮 -->
                <button class="ol-btn" @click="toPay(item.id, item)">
                    <div :style="{ 'background-color': item.statusColor }" class="btn-box">{{ item.statusName }}</div>
                </button>
            </div>
        </template>
        <noorder v-if="orderList.length === 0"></noorder>
    </div>
</template>
<script>
import noorder from './noOrder'
import { getOrderListAPI, getdingdanhuankuanAPI } from "../../api";
import { Toast } from "vant";
import { jiami, jiemi } from "../../utils/AESKey.js";
export default {
    components: { noorder },
    data() {
        return {
            number: this.$store.state.count,
            //标题的状态
            listTitle: [
                { id: 1, msg: 'সমস্ত', status: null },
                { id: 2, msg: 'সাফল্য', status: 'LOAN_SUCCESS' },
                { id: 3, msg: 'ওভারডিউ', status: 'DUNNING' },
                { id: 4, msg: 'সমাপ্তি', status: 'FINISH' },
            ],
            //产品列表
            orderList: []
        }
    },
    methods: {
        toICon(id) {
            return `https://app.pocketgo.xyz/lt-image/resize/0x0/${id}`
        },
        //获取所有的订单列表
        async getAllOrderList(data) {
            const p = {
                query: {
                    status: data,
                    pageNo: 1,
                    pageSize: 10
                }
            }
            const res = await getOrderListAPI(jiami(p))
            try {
                console.log(jiemi(res.data), '获取订单列表')
                this.orderList = jiemi(res.data).page.content
            } catch (error) {

            }
        },
        //切换顶部状态
        doClick(item) {
            this.number = item.id
            this.$store.commit('changeCount', item.id)
            this.getAllOrderList(item.status)
            this.$store.commit('changeStatus', item.status)
        },
        //点击去还款
        async toPay(id, item) {
            if (!item.loan) {
                Toast(item.statusNote)
                return
            }
            //将订单id存入vuex
            this.$store.commit('changeOrderId', id)
            const f = {
                model: {
                    orderId: id
                }
            }
            const res = await getdingdanhuankuanAPI(jiami(f))
            try {
                this.$store.commit('changeOrderInfo', jiemi(res.data).model)
            } catch (error) {

            }
            this.$router.push('/payType')
        },
        //去客服list
        tokefuList(id) {
            //将订单id存入vuex
            this.$store.commit('changeOrderId', id)
            this.$router.push('/kefuList')
        }
    },
    created() {
        this.getAllOrderList(this.$store.state.status || null)
    }
}
</script>
<style lang="less" scoped>
.order {
    width: 100vw;
    min-height: (667/@a);
    background-color: #f5f5f5;
    padding-top: (60/@a);
    padding-bottom: (20/@a);

    .order-list {
        position: relative;
        width: (330/@a);
        margin-top: (18/@a);
        margin-left: (23/@a);
        background: #FFFFFF;
        border-radius: (16/@a);
        padding-bottom: (10/@a);

        .ol-btn {
            position: absolute;
            top: (10/@a);
            right: (0/@a);
            height: (36/@a);

            .btn-box {
                padding: (10/@a);
                color: #fff;
                text-align: center;
                font-size: (12/@a);
                border-radius: (16/@a) 0 0 (16/@a);
            }

            img {
                width: 100%;
            }
        }

        .ol-info {
            width: (330/@a);
            display: flex;
            justify-content: space-around;

            .ol-info-left {
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #2D2D2D;
                text-align: left;

                li {
                    margin-bottom: (10/@a);
                }
            }

            .ol-info-right {
                text-align: right;
                font-size: (10/@a);
                font-family: Nirmala UI;
                font-weight: 400;
                color: #626262;

                li {
                    margin-bottom: (10/@a);
                }

                .kefu {
                    width: (31/@a);
                    height: (27/@a);
                    margin-left: (80/@a);

                    img {
                        width: 100%;
                    }
                }

            }
        }

        .ol-top {
            padding-top: (13/@a);
            box-sizing: border-box;

            .ol-img {
                width: (35/@a);
                height: (35/@a);
                background: #415AB8;
                border-radius: 50%;
                margin-left: (147/@a);
                margin-bottom: (5/@a);

                img {
                    width: 100%;
                }
            }

            .ol-name {
                margin-left: (133/@a);
                font-size: (13/@a);
                font-family: Nirmala UI;
                font-weight: bold;
                color: #808080;
            }
        }

    }

    .order-top {
        display: flex;
        justify-content: space-around;
        margin-top: (21/@a);

        .active {
            color: #010101 !important;

            &::after {
                content: '';
                display: inline-block;
                width: (33/@a);
                height: (10/@a);
                background-color: #6b82d8;
                border-radius: (9/@a);
            }
        }

        .isActive {
            color: #010101;
        }

        li {
            font-size: (13/@a);
            font-family: Nirmala UI;
            font-weight: bold;
            color: #808080;
        }
    }
}
</style>